﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
    <div id="app">
        <div>

            <mt-cell>
                <mt-header fixed title="用户信息"></mt-header>
            </mt-cell>
        </div>

        <div>
            <mt-field label="手机号" placeholder="请输入手机号" v-on:keydown="XyPhone" type="tel" :state="state" :attr="{ maxlength: 11 }" v-model="phone"></mt-field>
            <mt-button type="primary" @click.native="handleClick" class="btn-block" :disabled="isSubmit" size="large">绑    定</mt-button>
        </div>

    </div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script src="js/Jquery.js"></script>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                code: '',
                state: 'error',
                phone: '',
                isSubmit: true
            }
        },
        methods: {
            handleClick: function () {
                //window.addEventListener('pagehide', 
                //    function () {
                //        console.log('页面要关闭了');
                //    });
                //发送 post 请求
                $.ajax({
                    type: "post",
                    url:'/api/Auth2/Auth',
                    contentType: 'application/json',
                    data :JSON.stringify({ phone: this.phone,code:this.code }),
                    dataType: "json",
                    //beforeSend: function (XMLHttpRequest) {
                    //    XMLHttpRequest.setRequestHeader("accept", " text/plain");
                    //},
                    success: function (data) {
                        if (data == true) {
                            this.$toast('绑定成功！');
                        } else {
                            this.$toast('手机号格式有误！');
                        }
                    },error:function(error){
                        this.$toast('操作超时请重试！');
                    }
                });

                //$.post('/api/Auth2/Auth', { phone: this.phone,code:this.code }).then(function (res) {
                //    //document.write(res.body);
                //}, function (res) {
                //    console.log(res.status);
                //});
            },
            XyPhone: function() {
               
            }
        },
        mounted() {
            this.code = decodeURIComponent((new RegExp('[?|&]code=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20'));
            //alert(this.code);
        },
        watch: {
            "phone": function (newVal, oldVal) {
                this.isSubmit = true;
                if (newVal.length < 11 && newVal.length > 3) {
                    this.state = 'warning';
                } else if (newVal.length == 11) {
                    if ((/^1[3456789]\d{9}$/.test(newVal))) {
                        this.state = 'success';
                        this.isSubmit = false;
                    } else {
                        this.$toast('手机号格式有误！');
                    }
                }else {
                    this.state = 'error';
                } 
            }
        }
        

    })

</script>
</html>

<script>

    //function getQueryVariable(variable) {
    //    var query = window.location.search.substring(1);
    //    var vars = query.split("&");
    //    for (var i = 0; i < vars.length; i++) {
    //        var pair = vars[i].split("=");
    //        if (pair[0] == variable) { return pair[1]; }
    //    }
    //    return (false);
    //}

    //$(function () {
    //    alert(getQueryVariable("code"));
    //});


</script>
<style type="text/css">
    .app {
        text-align: center;
    }
    /* 添加班课样式 */
    .btn-block {
        margin-top: 55%;
    }
</style>